<template>
  <el-card class="box-card">
      <el-form :model="dataList" label-width="120px">
          <el-form-item label="品牌名称" :rules="[
        {required: true, message: '请输入品牌名称', trigger: 'blur' },
        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
      ]">
        <el-input v-model="dataList.name" />
          </el-form-item>
          <el-form-item label="品牌首字母" >
              <el-input v-model="dataList.firstLetter" />
          </el-form-item>
          <el-form-item label="品牌LOGO" :rules="[
        {required: true, message: '请输入品牌logo', trigger: 'blur'}
        
      ]">
              <el-upload v-model:file-list="fileList" class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-preview="handlePreview"
                  :on-remove="handleRemove" list-type="picture">
                  <el-button type="primary">点击上传</el-button>
                  <template #tip>
                      <div class="el-upload__tip">
                          只能上传jpg/png文件，且不超过100kb
                      </div>
                  </template>
              </el-upload>
          </el-form-item>
          <el-form-item label="品牌专区大图">
              <el-button type="primary">点击上传</el-button>
          </el-form-item>
          <el-form-item label="品牌故事">
              <el-input v-model="form.logo" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="排序">
              <el-input v-model="dataList.sort" />
          </el-form-item>
          <el-form-item label="是否显示">
              <el-radio-group v-model="form.showStatus">
                  <el-radio label="是" />
                  <el-radio label="否" />
              </el-radio-group>
          </el-form-item>
          <el-form-item label="品牌制造商">
              <el-radio-group v-model="form.sort">
                  <el-radio label="是" />
                  <el-radio label="否" />
              </el-radio-group>
          </el-form-item>
          <el-form-item>
              <template #default="scope">
                  <el-button type="primary" @click="onSubmit">提交</el-button>
                  <el-button>重置</el-button>
              </template>
          </el-form-item>
      </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox ,FormRules } from 'element-plus'
import type { AdminAdd, AdminAddCategory, IAdminListRes, IAdminListItem, createItem } from '../../request/QmsAdminConreillerA/index'
import * as api from '../../request/api'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { id } from 'element-plus/es/locale'
import { useRoute } from "vue-router"
let route = useRoute()
const fileList = ref<UploadUserFile[]>([
])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
// do not use same name with ref
let form = ref({
  bigPic: "",
  brandStory: "",
  factoryStatus: 0,
  firstLetter: "",
  logo: "",
  name: "",
  showStatus: 0,
  sort: 0,
  id: route.query.id
})
const dataList = ref({
  name:'',
  firstLetter:'',
  sort:''
})
const onSubmit = async () => {
  form.value = dataList.value
  await api.adminA.createItemEdits(form.value)
}
api.adminA.createItemEdit(form.value.id).then(res => {
  console.log(res);
  dataList.value = res

})


</script>

<style scoped>
.box-card {
  width: 790px;
  margin: 100px auto;
}
</style>